<template>
  <div class="home">
    <!-- 搜索部分 -->
    <div class="search">
      <van-row justify="center">
        <van-col span="24">
          <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          @click="$router.push('/search/' + value)"
          />
        </van-col>
      </van-row>
    </div>
    <!-- 轮播图部分 -->
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in isswipe" :key="item.swipe_id">
          <img :src="item.image">
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 导航模块 -->
    <div class="nav">
      <van-grid>
        <van-grid-item v-for="item in isNav" :key="item.nav_id" @click="doNavlist(item.nav_id)">
          <van-image :src="item.nav_icon" class="navimg" />
          <p>{{ item.nav_title }}</p>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 精品推荐 -->
    <div class="shop">
      <h5>精品推荐：</h5>
      <!-- 商品展示 -->
      <van-grid :border="false" :column-num="2" :gutter="10">
        <van-grid-item v-for="item in isTshop.slice(0,4)" :key="item.id" :to="'/shopdetails/' + item.id">
          <van-image :src="API.BASE_SERVER_URL + item.defaultImg" class="imgtt" />
          <p class="shoptitle">{{ item.name.slice(0,20) }}</p>
          <span class="shopprice">￥{{ (item.price / 100).toFixed(2) }}</span>
          <s class="price"> {{ '￥' + (item.shopPrice / 100).toFixed(2) }}</s>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 更多商品 -->
    <div class="tshop">
      <h5>更多商品：</h5>
      <!-- 上拉刷新 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getTshops"
      >
      <!-- 商品部分 -->
      <van-card v-for="item in isTshop" :key="item.id"
        :price="(item.price / 100).toFixed(2)"
        :origin-price="(item.shopPrice / 100).toFixed(2)"
        :title="item.name"
        :thumb="API.BASE_SERVER_URL + item.defaultImg"
        :to="'/shopdetails/' + item.id"
      />
      </van-list>
    </div>
    <Tabbar />
  </div>
</template>

<script>

export default {
  name: 'Home',
  components: {
  },
  data () {
    return {
      // 搜索关键字
      value: '',
      isswipe: [],
      isNav: [],
      isTshop: [],
      isnumber: 0,
      loading: false,
      finished: false
    }
  },
  methods: {
    // 轮播图图片
    getSwipes () {
      fetch('http://node.hhxcaz.top:415/swipe').then(data => {
        return data.text()
      }).then(data => {
        let isData = JSON.parse(data)
        this.isswipe = isData.data
      })
    },
    // nav栏图标
    getNavs () {
      fetch('http://node.hhxcaz.top:415/nav').then(data => {
        return data.text()
      }).then(data => {
        let isData = JSON.parse(data)
        this.isNav = isData.data
      })
    },
    // 获取商品数据
    async getTshops () {
      this.isnumber += 5
      const { data: res } = await this.$post(this.API.API_URL_CATALOG_INDEX_PRODUCTS + '/' + this.isnumber)
      this.isTshop = res[0].productRelationList
      this.loading = false
      if (res[0].productRelationList.length === this.isTshop.length) this.finished = true
    },
    toa () {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 500
      })
    },
    // 由于前面的设计有点问题，然后不想改了
    doNavlist (index) {
      switch (index) {
        case 1:
          this.$router.push('/shoplist')
          break
        case 2:
          this.$router.push('/coupon')
          break
        case 3:
          this.$router.push('/balance')
          break
        case 4:
          this.$router.push('/qian')
          break
      }
    }
  },
  created () {
    this.getSwipes()
    this.getNavs()
    this.getTshops()
    this.toa()
  }
}
</script>

<style scoped>
.home {
  padding-bottom: 40px;
}
.search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;
}
.nav .navimg {
  width: calc(100% - 22px);
}
.swipe {
  margin-top: 54px;
  padding: 0 5px;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 0px;
    text-align: center;
    background-color: #39a9ed;
  }
  .my-swipe .van-swipe-item img {
    width: 100%;
  }
  .nav {
    margin: 10px 0;
  }
  .shop h5, .tshop h5 {
    margin: 0 10px 0;
    text-align: left;
  }
  .van-grid {
    margin: 0 20px;
  }
  .shop .imgtt {
    width: calc(100% - 40px);
  }
  .shop .shoptitle {
    font-size: 14px;
  }
  .shop .shopprice {
    font-size: 16px;
    color: #f1992d;
  }
  .shop /deep/ .price {
    margin-top: 5px;
    font-size: 14px;
    color: #969799;
  }
  .van-card__content {
    text-align: left;
  }
  div /deep/ .nav .van-grid .van-image__img {
    max-width: 60px;
    min-width: 40px;
    margin: 0 auto;
  }
</style>
